<template>
	<div class="cart-concert-wrapper">
	  <div class="cart-concert-btm">
	  	<div class="concern-cart">
	  		<a class="concern-item kefu" href="tel: 123456789">
	  			<i class="iconfont icon-kefu"></i>
	  			<span>客服</span>
	  		</a>
	  		<router-link :to="{ path: '/cart' }" class="concern-item cart" tag="div">
	  			<i class="iconfont icon-gouwuchezhengchang"><badge class="badge" :text="cartLen"></badge></i>
	  			<span>购物车</span>
	  		</router-link>
	  	</div>
	  	<div class="action-btn">
	  		<span v-if="!disableBuy" class="yellow-color add_cart" @click="addToCart">加入购物车</span>
		  	<span class="red-color buy_product" :class="{ disable: disableBuy }" @click="openChoosePen">
		  		{{ disableBuy?'商品已售罄': '立即购买' }}
		  	</span>
	  	</div>
	  </div>
  </div>
</template>

<script>
import { Badge } from 'vux'
import { mapGetters, mapActions } from 'vuex'
import http from '@/utils/http'

export default {
	props: {
		params: {
			type: Object,
			default: {}
		},
		totalStock: {
			type: Number,
			default: 0
		}
	},
	components: {
		Badge
	},
  data () {
  	return {
  		
  	}
  },
  computed: {
  	...mapGetters(['cartLen', 'userInfo']),
  	disableBuy () {
  		if (this.totalStock == 0 ) return true
  		return false
  	},
  },
  methods: {
  	...mapActions(['getCartLen']),
  	addToCart () {
  		//this.$store.dispatch('add',{ data: this.data, amount: 1, type: 'cart' })
  		if (!this.userInfo) {
  			this.$router.push({ path: '/login' })
  			return
  		}
  		let params = {
  			goodsId: this.params.goodsId,
  			skuId: this.params.skuId,
  			type: this.params.type,
  			isHideLoad: true
  		}
  		http.post('/api/v1/cart', params, false, res => {
  			if (res.status == 1) {
  				this.getCartLen()
  				this.$vux.toast.show({
		  			text: '加入购物车成功~',
		  			type: 'success',
		  			width: 'auto',
		  			position: 'middle'
		  		})
  			}else {
  				this.$vux.toast.show({
		  			text: res.msg,
		  			type: 'warn',
		  			width: 'auto',
		  			position: 'middle'
		  		})
  			}
  		})
		  		
  	},
  	openChoosePen () {
  		if (this.disableBuy) {
  			return
  		}
  		this.$emit('open-choose', true)
  	}
  }
}
</script>

<style scoped>
.cart-concert-wrapper {
	height: 46px;
}
.cart-concert-btm {
	position: fixed;
	bottom: 0;
	display: flex;
	width: 100%;
	max-width: 640px;
	z-index: 100;
	background: rgba(255, 255, 255, .95);
}
.concern-cart {
	border-top: 1px solid #f1f1f1;
}
.concern-cart,
.action-btn {
	flex: 1;
	display: flex;
}
.concern-item {
	flex: 1;
	text-align: center;
}
.concern-item span {
	font-size: 13px;
	color: #333;
	line-height: 13px;
	display: block;
}
.action-btn span {
	flex: 1;
	padding: 12px 0;
	background: #f23030;
	font-size: 14px;
	color: #fff;
	text-align: center;
}
span.yellow-color {
	background: #ffb03f;
}
.iconfont {
	position: relative;
	display: inline-block;
	height: 20px;
	width: 20px;
	line-height: 20px;
	margin: 6px 0 2px 0;
	color: #333;
}
.kefu .iconfont {
	font-size: 20px;
}
.cart .iconfont {
	font-size: 18px;
}
.badge {
	position: absolute;
	right: -8px;
	top: -3px;
	line-height: 16px !important;
	color: #fff !important;
	font-size: 10px !important;
}
.action-btn .disable {
	background: #9b9b9b;
}
</style>
